<template>
  <div class="sys-login">
    <div class="login">
      <div class="login-top">
        <h5>欢迎登录</h5>
      </div>
      <div class="login-center">
        <el-form
          class="sys-loginCom-form"
          :rules="loginRules"
          label-width="0"
          ref="loginForm"
          :model="loginForm"
        >
          <!--账号-->
          <el-form-item class="no-suffix">
            <el-input
              size="small"
              placeholder="请输入姓名"
              v-model="loginForm.username"
            >
              <i slot="prefix" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <!--密码-->
          <el-form-item class="no-suffix">
            <el-input
              size="small"
              placeholder="请输入密码"
              auto-complete="off"
              v-model="loginForm.password"
              :type="passwordType"
            >
              <i
                slot="suffix"
                class="el-icon-view el-input-icon"
                @click="showPassword"
              ></i>
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <!--登录-->
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="login-submit-button"
              @click.native="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let validateUserName = (rule, value, callback) => {
      if (value.length > 64) {
        callback(new Error('用户名不能超过64位字符'))
      } else {
        if (/^(?!_)(?!.*?$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
          callback()
        } else {
          callback(
            newError('用户名包含中英文、数字和下划线，且不能下划线开头结尾')
          )
        }
      }
      coneole.log(rule)
    }
    return {
      loginForm: {
        username: 'admin',
        password: '123',
        code: '',
      },
      loginRules: {
        username: [
          { required: true, message: '', trigger: 'blur' },
          { required: validateUserName, trigger: 'blur' },
        ],
        password: [{ required: true, message: '', trigger: 'blur' }],
      },
      passwordType: 'password',
    }
  },
  methods: {
    showPassword() {
      this.passwordType == ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    //登录
    handleLogin() {
      this.$nextTick(() => {
        if (
          this.loginForm.username == 'admin' &&
          this.loginForm.password == '123'
        ) {
          this.$router.push({ path: '/home/order' })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.sys-login {
  width: 100%;
  height: 100%;
  background: url('@/assets/background.png') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  .login {
    background-color: #fff;
    width: 460px;
    height: 500px;
    margin: 340px auto 0px 340px;
    border-radius: 10px;
    // opacity: 0.2;
    overflow: hidden;
    h5 {
      font-size: 30px;
      font-weight: 500;
      line-height: 30px;
      color: #3471ff;
      margin-top: 32px;
      margin-bottom: 27px;
      text-align: center;
    }
  }
}
.login-center {
  margin-top: 23px;
  .sys-loginCom-form {
    margin: 10px 0;
    i {
      color: #dcdfe6;
      margin-top: 45px;
      font-size: 30px;
      margin-right: 20px;
    }
    .el-form-item__content {
      width: 100%;
    }
    .el-form-item {
      margin-bottom: 25px;
    }
    .el-input {
      input {
        text-indent: 20px;
        background: transparent;
        border: none;
        color: #bfbfbf;
        height: 60px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
      }
      .el-input__prefix {
        i {
          margin-left: 12px;
          display: inline-block;
          padding: 0 5px;
          line-height: 60px;
          font-size: 36px;
          margin-top: 30px;
        }
      }
    }
    .no-suffix {
      .el-input__suffix {
        display: none;
      }
    }
    .el-form-item .is-error {
      .el-input__inner {
        border-color: #f56c6c;
      }
    }
    ::v-deep .el-input--small .el-input__inner {
      height: 60px;
      line-height: 60px;
      font-size: large;
      margin-top: 30px;
    }
    ::v-deep .el-input--prefix .el-input__inner {
      padding-left: 90px;
    }
    .login-submit-button {
      width: 350px;
      height: 50px;
      background: #3471ff;
      color: #fff;
      font-size: 22px;
      margin-top: 46px;
      margin-left: 53px;
    }
    .code-row {
      height: 60px;
      margin: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .codeBtn {
        border: 0;
      }
      .codeBtn:hover {
        color: #606266;
        background: none;
      }
    }
    .note-text {
      font-size: 18px;
      color: #868ba1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-of-type(1) {
        flex: 1;
      }
      .el-button {
        font-size: 18px;
      }
    }
  }
}
</style>
